import Vue from 'vue'
// 注册一个全局自定义指令 `v-loading`
Vue.directive('loading', {
    bind(el, binding, vnode) {
        // 创建一个加载动画的DOM元素
        const loadingDiv = document.createElement('div');
        loadingDiv.innerHTML = '<div class="loading-spinner">加载中...</div>';
        loadingDiv.className = 'loading-mask';
        loadingDiv.style.display = 'none'; // 默认隐藏

        // 插入到绑定的元素内部
        el.appendChild(loadingDiv);
        el.loadingMask = loadingDiv;
    },
    inserted(el) {
        // 当绑定的数据改变时，根据条件显示或隐藏加载动画
        el.watchLoading = true;
        Object.defineProperty(el, 'loading', {
            get() {
                return this.watchLoading;
            },
            set(value) {
                this.watchLoading = value;
                if (value) {
                    el.loadingMask.style.display = 'block';
                } else {
                    el.loadingMask.style.display = 'none';
                }
            },
        });
    },
    unbind(el) {
        // 清理工作，移除自定义的属性和监听器
        el.removeAttribute('loading-mask');
        delete el.loadingMask;
        delete el.watchLoading;
    },
});
